/**
在 Webpack 中，动态导入（Dynamic Imports）是一种强大的代码分割技术，允许开发者在运行时按需加载模块。通过动态导入，可以显著提高应用的性能和用户体验。
  1. 什么是动态导入？
  动态导入是指在代码运行时根据需要加载模块，而不是在应用启动时就加载所有模块。它利用 ES2020 引入的  `import()`  语法实现。

  2. 动态导入的优势
  - 按需加载: 只有在需要某个模块时才加载它，从而减少初始加载时的代码量。
  - 提高性能: 通过分包，用户可以更快地访问应用的核心功能，其他功能可以在需要时再加载。
  - 改善用户体验: 动态导入可以减少页面加载时间，提高应用的响应速度。

  3. 使用动态导入的基本语法
  使用动态导入时，可以通过  `import()`  函数来加载模块。 `import()`  返回一个 Promise，因此可以使用  `then()`  方法处理加载成功的模块。

   示例：
  // 在需要时动态加载模块
  function loadModule() {
      import('./module.js')
          .then(module => {
              // 使用加载的模块
              module.doSomething();
          })
          .catch(err => {
              console.error('模块加载失败:', err);
          });
  }
  4. Webpack 配置
  在使用动态导入时，Webpack 会自动为动态导入的模块创建一个新的代码块。默认情况下，动态导入的模块会被打包到一个单独的文件中。

   示例 Webpack 配置：
  const path = require('path');

  module.exports = {
      entry: './src/index.js',
      output: {
          filename: '[name].bundle.js',
          path: path.resolve(__dirname, 'dist'),
      },
      mode: 'development',
  };
  5. 代码分割与动态导入
  动态导入实际上是实现代码分割的一种方式。通过将某些模块标记为动态导入，Webpack 会在构建时将它们分割到单独的文件中。

  6. 注意事项
  - 浏览器支持: 动态导入是 ES2020 的一部分，确保目标浏览器支持这一特性。对于不支持的浏览器，可能需要使用 Babel 等工具进行转译。
  - 错误处理: 由于动态导入是异步的，建议使用  `catch`  方法处理加载失败的情况。
  - 性能优化: 虽然动态导入可以提高性能，但过度使用可能会导致请求数量增加，影响性能。因此，合理规划动态导入的使用场景。

  总结
  Webpack 中的动态导入是一种有效的代码分割技术，能够显著提升应用的加载性能和用户体验。通过按需加载模块，开发者可以优化应用的响应速度，减少不必要的资源消耗。希望这个总结对你理解 Webpack 中的动态导入有所帮助！
 */
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  devtool: false,
  // entry: './src/index.js',
  entry: "./src/main.js",
  output: {
    clean: true,
    path: path.resolve(__dirname, "./build"),
    filename: "[name]-bundle.js", // [name]占位符，表示entry的key
    chunkFilename: "[name]_chunk.js",
  },
  resolve: {
    extensions: [".js", ".json", ".wasm", ".jsx", ".ts"],
  },
  devServer: {
    static: ["public", "content"],
    port: 3000,
    compress: true, // 开启gzip压缩
    devMiddleware: {
      index: true,
    },
    proxy: [
      {
        context: () => true,
        target: "http://localhost:1234",
        pathRewrite: { "^/api": "" },
      },
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.ts$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", // 模板文件
    }),
  ],
};
